<template>
  <div class="padding-t-20 dock-record">
    <q-table
      class="users-table scroll my-sticky-virt scroll-table myTable inherit"
      style="margin: 0"
      :style="{ maxHeight }"
      :columns="tableColumns"
      :data="tableData"
      row-key="id"
      :pagination.sync="pagination"
      no-data-label="暂无数据"
      color="primary"
      :hide-bottom="tableData.length > 0"
      :loading="isTableLoading"
    >
      <template v-slot:body-cell-bindingTime="props">
        <q-td>
          {{ props.row.bindingTime | toTime }}
        </q-td>
      </template>
      <template v-slot:body-cell-unBindingTime="props">
        <q-td>
          {{ props.row.unBindingTime | toTime }}
        </q-td>
      </template>
    </q-table>
    <!--  分页-->
    <yz-pagination v-model="pagination" @onSearch="getList"/>
  </div>
</template>

<script>
import { getBindingRecordMode } from 'src/boot/tool/tool-code'
export default {
  name: 'dock-record',
  components: {
  },
  props: {
    data: Object,
    maxHeight: {
      type: String,
      default: '420px'
    }
  },
  data () {
    return {
      isTableLoading: false,
      // 表格分页配置
      pagination: {
        // 当前页码
        pageNum: 1,
        // 每页条数
        pageSize: 15,
        // 总条数
        rowsNumber: 0
      },
      id: null,
      // 表格列
      tableColumns: [
        { name: 'deviceName', label: '加工设备', align: 'left', field: 'deviceName' },
        { name: 'workshopName', label: '所在车间', align: 'left', field: 'workshopName' },
        { name: 'bindingTime', label: '装载时间', align: 'left', field: 'bindingTime' },
        { name: 'bindingUser', label: '装载操作人', align: 'left', field: 'bindingUser' },
        { name: 'unBindingTime', label: '卸载时间', align: 'left', field: 'unBindingTime' },
        { name: 'unBindingUser', label: '卸载操作人', align: 'left', field: 'unBindingUser' },
        { name: 'useLife', label: '使用寿命（次）', align: 'left', field: 'useLife' }
      ],
      tableData: []
    }
  },
  computed: {
  },
  watch: {
    data: {
      handler (val) {
        if (val.id !== this.id) {
          this.id = val.id
          this.pagination.pageNum = 1
          this.pagination.pageSize = 15
          this.id && this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
  },
  methods: {
    getList () {
      let params = {
        ...this.pagination,
        id: this.id
      }
      this.isTableLoading = true
      this.tableData = []
      getBindingRecordMode(params).then(res => {
        console.log(res)
        const ret = res.data
        this.tableData = ret.records
        this.pagination.rowsNumber = ret.total
      }).finally(() => {
        this.isTableLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dock-record{
  //display: flex;
  //flex-direction: column;
  //justify-content: space-between;
  //height: 540px;
}
</style>
